<template>
  <a-card title="走马灯">
    <div class="w-600px h-100px">
      <Carousel :swiperDate="SWIPER_DATA"
                :sliceUnit="4">
        <!-- <template #content="{ item }">
          <div class="swiper_Item_container">
            <div class="period_Title">{{ item.title }}</div>
            <div><el-rate v-model="item.star" disabled /></div>
          </div>
        </template> -->
      </Carousel>
    </div>
  </a-card>
  <a-card title="表格">
    <form-filter :SearchDataList="SEARCH_DATA_LIST"
                 ref="search"
                 menuName="bulkInspectionTaskPageForm" />
    <ino-table ref="inoTableRef"
               :columns="COLUMNS"
               :showSelection="true"
               :data="TABLE_DATA">
      <template #dateTR="{ record}">
        {{ record.date }}
      </template>
      <template #nameTR="{ record }">
        {{ record.date }}
      </template>
      <template #opertionTR="{ record }">
        <el-button size="small">
          Edit
        </el-button>
        <el-button size="small"
                   type="danger">
          Delete
        </el-button>
      </template>
    </ino-table>
  </a-card>

  <a-card title="通用表单"> </a-card>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { SWIPER_DATA, COLUMNS, TABLE_DATA, SEARCH_DATA_LIST } from './static'

const commonForm = ref()
const dlgRef = ref()

const popFormModel = async () => {
  dlgRef.value.openDig()
  let result = await commonForm.value.onSubmit()
  if (result) {
    console.log('当前表单数据', result)
  }
}

const FormComponentRef = ref()
const inoTableRef = ref()

const formState = reactive({})

const onSubmit = () => {
  // FormComponentRef.value.onSubmit()
  /* 测试ref */
  FormComponentRef.value
    .validate()
    .then(() => {
      message.success('校验成功!!!')
    })
    .catch(err => {
      console.log('error', err)
    })
}

const change = () => {
  console.log(formState)
}
const testClick = () => {
  console.log(formState.reasonIds)
}
onMounted(() => {
  console.log('FormComponentRef', FormComponentRef.value)
  console.log('inoTableRef', inoTableRef.value)
})
</script>

<style scoped>
.bottom {
  width: 100%;
}
.ant-card {
  margin: 12px;
}

.swiper_Item_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 214px;
  border-radius: 11px;
  margin-right: 24px;
  padding: 22px;
  box-sizing: border-box;
  background: rgb(0, 0, 0, 0.02);
}
.period_Title {
  height: 20px;
  font-weight: bold;
  font-size: 20px;
  color: rgb(0, 0, 0, 0.7);
}

.describe {
  font-weight: 400;
  font-size: 13px;
  color: rgb(0, 0, 0, 0.7);
}
</style>
